<template>
  <div class="search-container">
    <el-row justify="center">
      <el-col :span="12">
        <el-input v-model="keyword" placeholder="请输入搜索内容" @keyup.enter="handleSearch" clearable />
      </el-col>
      <el-col :span="4">
        <el-select v-model="type" placeholder="请选择类型">
          <el-option label="帖子" value="posts" />
          <el-option label="社团" value="clubs" />
          <el-option label="评论" value="comments" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider />
    <div v-if="results.length">
      <div v-for="item in results" :key="item.id" class="result-item">
        <template v-if="type === 'posts'">
          <div><b>id：</b>{{ item.id }}</div>
          <div><b>标题：</b>{{ item.title }}</div>
          <div><b>内容：</b>{{ item.content }}</div>
          <div><b>作者：</b>{{ item.author }}</div>
        </template>
        <template v-else-if="type === 'clubs'">
           <div><b>id：</b>{{ item.id }}</div>
          <div><b>社团名：</b>{{ item.clubName }}</div>
          <div><b>简介：</b>{{ item.description }}</div>
          <div><b>社长：</b>{{ item.currentLeaderName }}</div>
        </template>
        <template v-else>
          <div><b>id</b>{{ item.id }}</div>
          <div><b>评论内容：</b>{{ item.content }}</div>
          <div><b>作者：</b>{{ item.author }}</div>
        </template>
        <el-divider />
      </div>
    </div>
    <div v-else class="no-result">暂无结果</div>
  </div>
</template>

<script>
import { searchPosts, searchClubs, searchComments } from '@/api/search'

export default {
  name: 'Search',
  data() {
    return {
      keyword: '',
      type: 'posts',
      results: []
    }
  },
  methods: {
    handleSearch() {
      if (!this.keyword) {
        this.$message.info('请输入搜索内容')
        return
      }
      let searchFn = searchPosts
      if (this.type === 'clubs') searchFn = searchClubs
      if (this.type === 'comments') searchFn = searchComments
      searchFn(this.keyword).then(res => {
        this.results = res
      })
    }
  }
}
</script>

<style scoped>
.search-container {
  max-width: 900px;
  margin: 40px auto;
}
.result-item {
  margin-bottom: 20px;
}
.no-result {
  text-align: center;
  color: #888;
  margin-top: 40px;
}
</style> 